<template>
    <div>
        <div class="jc">
            <span>
                <h2>所有客户的订单详情</h2>
            </span>
            <span class="btn">
                <el-button style="margin:auto" icon="el-icon-circle-plus-outline"  
                            type="primary" @click="CriteriaDialogVisible=true">按条件查询
                </el-button>
                <el-dialog title="按条件查询订单" :visible.sync="CriteriaDialogVisible" width="30%" center>
                    <span>
                        <el-date-picker value-format="yyyy-MM-dd" type="dates" v-model="orderLine.tstart" placeholder="订单起始时间">
                        </el-date-picker>
                        <el-date-picker value-format="yyyy-MM-dd" style="margin-right:10px" type="dates" v-model="orderLine.tend" placeholder="订单结束时间">
                        </el-date-picker>
                        <el-input style="margin:10px 0;" placeholder="收货人" v-model="orderLine.nickname" clearable></el-input>
                        <el-input placeholder="收货电话" v-model="orderLine.phone" clearable></el-input>
                    </span>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="CriteriaDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="Criteria();CriteriaDialogVisible = false">查询</el-button>
                    </span>
                </el-dialog>
            </span>
        </div>
        <div style="margin:5px">
            <el-table border :data="orders">
                <el-table-column prop="ordid" label="订单号" min-width="5%">
                </el-table-column>
                <el-table-column prop="phone" label="买家电话" min-width="10%">
                </el-table-column>
                <el-table-column prop="nickname" label="收货人" min-width="10%">
                </el-table-column>
                <el-table-column prop="amount" label="总价" min-width="10%">
                </el-table-column>
                <el-table-column label="是否付款" min-width="10%">
                    <template slot-scope="scope">
                        <p v-html='scope.row.ispay==1?"<span style=\"color:green;\">已付款</span>":"<span style=\"color:red;\">未付款</span>"'>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column prop="shipno" label="发货单号" min-width="15%">
                </el-table-column>
                <el-table-column prop="addr" label="发货地址" min-width="15%">
                </el-table-column>
                <el-table-column prop="tcreate" label="下单时间" min-width="10%">
                </el-table-column>
                <el-table-column  label="操作" min-width="15%">
                    <template slot-scope="scope">
                        <el-popover placement="right" width="700" trigger="click">
                                <el-table :data="items" border>
                                    <el-table-column  label="图片" width="100">
                                        <template slot-scope="scope">
                                            <div style="width: 60px;height: 40px;">
                                                <el-image fit :src="`${imgUrl}/api/public/showImg/${scope.row.picture}`"
                                                    style="width: 60px; height: 40px;"></el-image>
                                            </div>
                                        </template>
                                    </el-table-column>

                                    <el-table-column property="name" label="商品名称"  width="299">
                                    </el-table-column>

                                    <el-table-column property="price" label="商品价钱"  width="100">
                                    </el-table-column>

                                    <el-table-column property="num" label="商品数量"  width="100">
                                    </el-table-column>

                                    <el-table-column label="小计"  width="100">
                                        <template slot-scope="scope">
                                            {{scope.row.num*scope.row.price}}
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-button @click="popover(scope.row.items)" slot="reference">明细</el-button>
                        </el-popover>
                        <el-button style="margin-left:10px" size="small" v-if="scope.row.ispay==1" 
                                type="success" @click="shipments(scope.row);centerDialogVisible=true">发货
                        </el-button>
                        <el-dialog title="发货确认" :visible.sync="centerDialogVisible" width="30%" center>
                            <span>
                                <el-input placeholder="请输入内容" v-model="obj.shipno">
                                    <template slot="prepend">发货单号</template>
                                </el-input>
                            </span>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="centerDialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="addShip();centerDialogVisible = false">确认发货</el-button>
                            </span>
                        </el-dialog>
                    </template>
                </el-table-column>
            </el-table>
            <div style="width:25%;margin:10px auto">
                <el-pagination background  :page-size="num"
                    @current-change="pageChange"
                    layout="prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
        export default {
            name:'',
            props:[],
            data() {
                return {
                    orders:[],
                    items:[],
                    //每页多少行
                    num:10,
                    //当前页数
                    page:0,
                    //总行数
                    total:0,
                    //发货对话框显示关闭
                    centerDialogVisible:false,
                    //条件查询显示
                    CriteriaDialogVisible:false,
                    //添加快递单号
                    obj:{shipno:'',ordid:''},
					//发货id
					shipmentsId:-1,
                    //条件查询
                    orderLine:{phone:'',nickname:'',tstart:'',tend:''},
                    //判断是否是条件查询的分页
                    quer:false
                    
                }
            },
            methods:{
                //点击明细的时候，把传进来的对象赋值到items身上，在标签循环
                popover(items){
                    this.items = items
                },
                //分页
                pageChange(n){
                    var that = this
                    let fd = new FormData();
                    for (const key in this.orderLine) {
                        if(this.orderLine[key]==null || this.orderLine[key]==''){
                            continue;
                        }
                        fd.append(key,this.orderLine[key])
                    }
                    this.$postFile("/api/adm/ord/findOrdInfo/"+(n-1)*that.num+"/"+that.num,fd)
                    .then(function(resp){
                        var orders = resp.data.data.orders
                        that.orders = orders
                        for (const key in orders) {
                            //给每条数据添加一个items的数组属性
                            that.$postX("/api/adm/ord/findItemInfoByOrdid/"+orders[key].ordid)
                            .then(function(resp){
                                that.orders[key].items = resp.data.data
                            })
                        }
                    })
                },
                //发货
                shipments(item){
					this.obj.shipno = ''
                    this.obj.ordid = item.ordid
					this.shipmentsId = this.orders.indexOf(item)
                },
                //确认添加快递单号
                addShip(){	
                    if(this.obj.shipno==''){
                        this.$message.error('确认发货时,单号不能为空');
                        return;
                    }
                    var that = this
                    this.$postJson("/api/adm/ord/addShip",that.obj)
                    .then(function(resp){
                        if(resp.data.data==1){
                            that.$message({
                                message: '发货成功',
                                type: 'success'
                            });
							that.orders[that.shipmentsId].shipno =  that.obj.shipno
                            return;
                        }
                        this.$message.error('添加失败');
                    })
                },
                //条件查询
                Criteria(){
                    let fd = new FormData();
                    for (const key in this.orderLine) {
                        if(this.orderLine[key]==null || this.orderLine[key]==''){
                            continue;
                        }
                        fd.append(key,this.orderLine[key])
                    }
                    var that = this
                    this.$postFile("/api/adm/ord/findOrdInfo/0/"+that.num,fd)
                    .then(function(resp){   
                        console.log(resp);
                        var orders = resp.data.data.orders
                        that.orders = orders
                        //赋值total计算分页
                        that.total = resp.data.data.total
                        //循环10条数据
                        for (const key in orders) {
                            //给每条数据添加一个items的数组属性
                            that.$postX("/api/adm/ord/findItemInfoByOrdid/"+orders[key].ordid)
                            .then(function(resp){
                                that.orders[key].items = resp.data.data
                            })
                        }
                    })
                    this.quer = true;
                }
            },
            mounted(){
                var that = this
                //查找10条数据
                this.$postX("/api/adm/ord/findOrdInfo/0/"+that.num)
                .then(function(resp){
                    var orders = resp.data.data.orders
                    that.orders = orders
                    //赋值total计算分页
                    that.total = resp.data.data.total
                    //循环10条数据
                    for (const key in orders) {
                        //给每条数据添加一个items的数组属性
                        that.$postX("/api/adm/ord/findItemInfoByOrdid/"+orders[key].ordid)
                        .then(function(resp){
                            that.orders[key].items = resp.data.data
                        })
                    }
                })
            }
        }
</script>
<style scoped="scoped">
.jc{
        display: flex;
        margin: 0 5px;
        justify-content:space-between;
        border-bottom: 2px solid gray;
    }
.btn{
        display: flex;
        justify-content: center;
        align-content:center;
    }
</style>
